<script setup lang="ts">
import type { Good } from "@/types/homeTypes/homeTypes.ts";

interface Props {
   good: Good;
}

defineProps<Props>();
</script>

<template>
   <li>
      <RouterLink :to="{name:'detail',params:{id:good.id}}">
         <img v-lazy="good.picture" class="loading">
         <div class="info">
            <p class="name ellipsis">{{ good.name }}</p>
            <p class="desc ellipsis">{{ good.desc }}</p>
            <p class="price"><i>¥</i>{{ good.price }}</p>
         </div>
      </RouterLink>
   </li>
</template>

<style scoped lang="less">

li {
   width: 310px;
   height: 120px;
   margin-right: 15px;
   margin-bottom: 15px;
   border: 1px solid #eee;
   border-radius: 4px;
   background: #fff;

   &:nth-child(3n) {
      margin-right: 0;
   }

   a {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      padding: 10px;

      &:hover {
         background: #e3f9f4;
      }

      img {
         width: 95px;
         height: 95px;
      }


      .info {
         padding-left: 10px;
         line-height: 24px;
         width: 190px;

         .name {
            font-size: 16px;
            color: #666;
         }

         .desc {
            color: #999;
         }

         .price {
            font-size: 22px;
            color: @priceColor;

            i {
               font-size: 16px;
            }
         }
      }
   }

   .loading {
      background: url("../../../../assets/images/error.png") no-repeat center center;
      background-size: 95px 95px;
   }
}
</style>
